<template>
    <div>
      <input type="text" v-model="newTodoTitle">
      <button @click="addTodo">添加</button>
      <div v-for="(todo, index) in todos" :key="index">
        <todo-item :title="todo.title" :completed="todo.completed" @update:completed="updateTodoCompleted(index, $event)" @remove-todo="removeTodo(index)"></todo-item>
      </div>
    </div>
  </template>
  
  <script>
  import TodoItem from './TodoItem.vue';
  
  export default {
    components: {
      TodoItem
    },
    data() {
      return {
        todos: [
          { title: '学习Vue', completed: false },
          { title: '完成作业', completed: true },
          { title: '看电影', completed: false }
        ],
        newTodoTitle: ''
      };
    },
    methods: {
      addTodo() {
        if (this.newTodoTitle.trim() !== '') {
          this.todos.push({ title: this.newTodoTitle, completed: false });
          this.newTodoTitle = '';
        }
      },
      removeTodo(index) {
        this.todos.splice(index, 1);
      },
      updateTodoCompleted(index, completed) {
        this.todos[index].completed = completed;
      }
    }
  };
  </script>
  